<template>
  <el-container >
    <el-header :class="isDataAnalysisView?'otherNav':''">
      <div class="title">
        <div class="huiZhang"></div>
        <div>综治网格化管理平台</div>
      </div>
      <el-menu :default-active="activeIndex2"
        style=""
        :class="isDataAnalysisView?'el-menu-demo el-menu-demo-other':'el-menu-demo'"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
        :background-color="isDataAnalysisView?'rgba(0,0,0,0.3)':'#409EFF'"
        active-text-color="#ffd04b">
        <el-menu-item v-for="(menu, i) in menus" :key="menu.id" :index="i.toString()" @click="navigationMenuClickEvt(menu)">{{menu.name}}</el-menu-item>
        <el-submenu index="1" class="personal-center">
          <template slot="title">个人中心</template>
          <el-menu-item index="1-1" @click="goHome">返回首页</el-menu-item>
          <el-menu-item index="1-2" @click="clearLocalCache">清除缓存</el-menu-item>
          <el-menu-item index="1-3" @click="updateUserPassword">修改密码</el-menu-item>
          <el-menu-item index="1-4" @click="updateUserInfo">修改个人信息</el-menu-item>
          <el-menu-item index="1-5" @click="exit">退出</el-menu-item>
        </el-submenu>
      </el-menu>
      <div v-if='isDataAnalysisView' class="special-title">{{childName}}</div>
    </el-header>
    <el-container class="rootContainer" :class="isDataAnalysisView?'rootContainer otherRootContainer':'rootContainer'">
      <el-aside width = '220px' v-if="!isDataAnalysisView">
        <el-menu class="app-menu">
          <app-nav :menu-list="menuList" v-on:saveCurrentClickStyle="saveCurrentClickStyle"></app-nav>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-row v-show="!isDataAnalysisView" class="leftMenu" :class="isDataAnalysisView?'leftMenu otherLeftMenu':'leftMenu'">
            <el-tabs v-model="activeIndex" type="card" closable @tab-click="tabClick" v-if="options.length" @tab-remove="tabRemove">
              <el-tab-pane :key="item.name" v-for="item in options" :label="item.name" :name="item.route"></el-tab-pane>
            </el-tabs>
          </el-row>
          <el-row class="leftMain" :class="isDataAnalysisView?'leftMain otherLeftMain':'leftMain'">
            <router-view />
          </el-row>
          <el-row>
            <el-dialog title="修改密码" :visible.sync="updatePasswordVisible" :before-close="cancel">
              <el-form label-position='right' label-width="120px" :model="updatePasswordFormData">
                <el-form-item label="当前密码">
                  <el-input type="password" v-model="updatePasswordFormData.currentPassword" placeholder="请输入当前密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input type="password" v-model="updatePasswordFormData.newPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码">
                  <el-input type="password" v-model="updatePasswordFormData.confirmNewPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="saveNewPwd">提 交</el-button>
              </div>
            </el-dialog>
            <el-dialog title="修改个人信息" :visible.sync="updateUserInfoVisible" :before-close="cancel">
              <el-form label-position='right' label-width="120px" :model="updateUserInfoFormData" v-loading="updateUserInfoLoading" :rules="rules" ref="updateUserInfoFormData">
                <el-form-item label="身份证号" prop="idCardNumber">
                  <el-input v-model="updateUserInfoFormData.idCardNumber" placeholder="请输入身份证号"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="updateUserInfoFormData.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="updateUserInfoFormData.sex" placeholder="请选择性别">
                    <el-option v-for="item in dictData.gender" :key="item.id" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="工号">
                  <el-input v-model="updateUserInfoFormData.jobNumber" placeholder="请输入工号"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input v-model="updateUserInfoFormData.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="updateUserInfoFormData.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="联系地址">
                  <el-input v-model="updateUserInfoFormData.address" placeholder="请输入联系地址"></el-input>
                </el-form-item>
                <el-form-item label="政治面貌">
                  <el-select v-model="updateUserInfoFormData.politicsStatus" placeholder="请选择政治面貌">
                    <el-option v-for="item in dictData.politicsStatus" :key="item.id" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="职务">
                  <el-select v-model="updateUserInfoFormData.titleName" placeholder="请选择职务">
                    <el-option v-for="item in dictData.title" :key="item.id" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文化程度">
                  <el-select v-model="updateUserInfoFormData.education" placeholder="请选择文化程度">
                    <el-option v-for="item in dictData.education" :key="item.id" :label="item.name" :value="item.code"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="saveNewUserInfo">提 交</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import AppNav from '@/components/common/AppNav'
import AppTree from '@/components/common/AppTree'
import DictDataUtil from '@/utils/DictDataUtil'
import {validateIdefer, validatePhone} from '@/utils/validate'
import { logout, updateUserPwd, getUserDetail, updateUserDetail } from '@/http/AppApi'
import { setMenu, clearPrevMenuStyle, setCurrentMenuStyle } from '@/utils/setMenu'
import { getUserPermissionTree, getActiveModuleId, clearSessionStorage, setUserInfo } from '@/utils/SessionDataUtil'
import { clearLocalStrorage } from '@/utils/LocalDataUtil'
export default {
  name: 'app',
  data () {
    return {
      activeIndex2: '0',
      menus: [],
      menuList: [],
      key: '',
      nav: '0',
      tabIndex: '',
      isDataAnalysisView: false,
      updatePasswordVisible: false,
      updateUserInfoVisible: false,
      updatePasswordFormData: {},
      updateUserInfoFormData: {},
      updateUserInfoLoading: true,
      dictData: {},
      childName: '',
      rules: {
        idCardNumber: [
          { validator: validateIdefer, required: false, trigger: 'blur' }
        ],
        phone: [
          { validator: validatePhone, required: false, trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    AppNav,
    AppTree
  },
  created () {
    // 获取当前模块
    let activeModule = getActiveModuleId()
    if (!activeModule || activeModule === '') {
      activeModule = this.$route.query.moduleId
    }
    this.getMenus(activeModule)
  },
  mounted () {
    sessionStorage.removeItem('currentApplicationKey')
    let menuContainerClassName = 'el-menu-demo'
    let prevKey = sessionStorage.getItem('currentClickMenuKey')
    if (prevKey) {
      let currentMenuInfo = {}
      currentMenuInfo.className = menuContainerClassName
      currentMenuInfo.key = prevKey
      setCurrentMenuStyle(currentMenuInfo)
      if (this.menus[prevKey].children) {
        this.menuList = this.menus[prevKey].children
      }
      if (this.menus[prevKey].id === '585757714936836098' && this.menus[prevKey].uri === '/waterDataAnalysis') this.isDataAnalysisView = true
      if (this.menus[prevKey].id === '589380617884454913' && this.menus[prevKey].uri === '/eventDataAnalysis') this.isDataAnalysisView = true
    }
    document.title = this.menuList[0].name + '_综治网格化管理平台'
    setMenu(menuContainerClassName, 7, this.isDataAnalysisView)
    let ul = document.getElementById('ulHidden')
    let m = this
    if (ul) {
      for (let i = 0; i < ul.childNodes.length; i++) {
        ul.childNodes[i].addEventListener('click', function () {
          let prevKey = sessionStorage.getItem('currentClickMenuKey')
          if (prevKey && this.key !== prevKey) {
            let keysInfo = {}
            keysInfo.prevKey = prevKey
            keysInfo.currentKey = this.key
            clearPrevMenuStyle(keysInfo)
          }
          sessionStorage.setItem('currentClickMenuKey', this.key)
          m.menuList = m.menus[this.key].children
          m.$router.push({path: m.menuList[0].uri})
        })
      }
    }
    // console.log(this.$route)
    // let path = this.$route.path
    // let name = this.$route.path
    // this.$store.commit('add_tabs', {
    //   route: path,
    //   name: name,
    //   index: this.nav
    // })
    // this.$store.commit('set_active_index', path)
  },
  updated () {
    let closeTabsObj = document.getElementById('closeTabs')
    if (closeTabsObj) closeTabsObj.parentNode.removeChild(closeTabsObj)
    let m = this
    let allDoms = document.getElementsByTagName('*')
    let elements = []
    let tabClassName = 'el-tabs__header'
    for (let i = 0; i < allDoms.length; i++) {
      let classNames = ''
      if (allDoms[i].className && allDoms[i].className instanceof Object === false && allDoms[i].className !== '') classNames = allDoms[i].className.split(' ')
      else continue
      for (let j = 0; j < classNames.length; j++) {
        if (classNames[j] === tabClassName) {
          elements = allDoms[i]
          break
        }
      }
    }
    let div = document.createElement('div')
    div.style.position = 'absolute'
    div.style.top = '0'
    div.style.right = '10px'
    div.style.borderLeft = '1px solid #ccc'
    div.style.width = '8.5%'
    div.style.color = '#fff'
    div.setAttribute('id', 'closeTabs')
    let tabsCloseHandle = document.createElement('div')
    tabsCloseHandle.style.fontSize = '14px'
    tabsCloseHandle.style.height = '40px'
    tabsCloseHandle.style.lineHeight = '40px'
    tabsCloseHandle.style.paddingLeft = '20px'
    tabsCloseHandle.style.cursor = 'default'
    if (this.isDataAnalysisView) {
      tabsCloseHandle.style.color = '#fff'
    } else {
      tabsCloseHandle.style.color = '#303133'
    }
    tabsCloseHandle.innerText = '关闭操作 '
    let span = document.createElement('span')
    span.className = 'iconfont el-icon-extend-xiala'
    tabsCloseHandle.appendChild(span)
    let ul = document.createElement('ul')
    let li = document.createElement('li')
    li.innerText = '关闭所有选项卡'
    let li1 = document.createElement('li')
    li1.innerText = '关闭右侧选项卡'
    ul.appendChild(li)
    ul.appendChild(li1)
    for (let j = 0; j < ul.childNodes.length; j++) {
      ul.childNodes[j].style.padding = '2px 4px'
      ul.childNodes[j].style.width = '101%'
      ul.childNodes[j].style.cursor = 'default'
      if (this.isDataAnalysisView) {
        ul.childNodes[j].style.color = '#fff'
      } else {
        ul.childNodes[j].style.color = '#303133'
      }
      ul.childNodes[j].addEventListener('click', function () {
        let arr = []
        if (j === 0) {
          // let option = {
          //   index: 5,
          //   name: '模块首页',
          //   route: '/modules'
          // }
          // arr.push(option)
          // m.$router.push({ path: '/modules' })
        } else {
          if (m.tabIndex === '') {
            return ''
          }
          let end = parseInt(m.tabIndex) + 1
          arr = m.$store.state.options.splice(0, end)
        }
        m.$store.state.options = arr
      })
    }
    ul.style.position = 'absolute'
    ul.style.top = '42px'
    ul.style.right = '12px'
    ul.style.listStyle = 'none'
    ul.style.padding = '0'
    ul.style.margin = '0'
    ul.style.fontSize = '13px'
    ul.style.lineHeight = '22px'
    ul.style.display = 'none'
    ul.style.zIndex = '1003'
    div.appendChild(ul)
    div.appendChild(tabsCloseHandle)
    tabsCloseHandle.addEventListener('click', function () {
      if (ul.style.display === 'none') ul.style.display = 'block'
      else ul.style.display = 'none'
    })
    if (elements.length !== 0) elements.appendChild(div)
    // let submenuItemId = parseInt(sessionStorage.getItem('currentSubmenClickMenuId'))
    let submenuItemId = this.$route.path
    if (submenuItemId) {
      let doms = document.getElementsByTagName('ul')
      let uls = []
      for (let i = 0; i < doms.length; i++) {
        if (doms[i].className === 'submenuThumb') {
          uls.push(doms[i])
        }
      }
      for (let k = 0; k < uls.length; k++) {
        for (let i = 0; i < uls[k].childNodes.length; i++) {
          let menuId = uls[k].childNodes[i].getAttribute('data')
          if (menuId === submenuItemId) {
            uls[k].childNodes[i].style.backgroundColor = '#ecf5ff'
            uls[k].childNodes[i].style.color = 'rgb(64, 158, 255)'
          } else {
            uls[k].childNodes[i].style.backgroundColor = '#d9eafc'
            uls[k].childNodes[i].style.color = 'unset'
          }
        }
      }
    }
  },
  methods: {
    getMenus (activeModule) {
      if (!activeModule) {
        this.$router.push({ path: '/' })
      } else {
        let permissionInfo = getUserPermissionTree()
        let currentMenuData = {}
        for (let i = 0; i < permissionInfo.length; i++) {
          if (activeModule === permissionInfo[i].id) {
            currentMenuData = permissionInfo[i]
          }
        }
        if (currentMenuData.length === 0) this.$router.push({ path: '/' })
        this.buildMenus(currentMenuData)
      }
    },
    buildMenus (menus) {
      if (menus && menus.name !== '系统设置' && menus.children) {
        this.menus = menus.children
      } else {
        this.menus = [menus]
      }
      this.menuList = this.menus[0].children
    },
    // tab切换时，动态的切换路由
    tabClick (tab) {
      this.tabIndex = tab.index
      let path = this.activeIndex
      let name = tab.name
      for (let i = 0; i < this.$store.state.options.length; i++) {
        if (name === this.$store.state.options[i].route) {
          let key = this.$store.state.options[i].index
          if (key) {
            this.menuList = this.menus[key].children
            let prevKey = sessionStorage.getItem('currentClickMenuKey')
            if (prevKey && key !== prevKey) {
              let keysInfo = {}
              keysInfo.prevKey = prevKey
              keysInfo.currentKey = key
              clearPrevMenuStyle(keysInfo)
              // let routName = this.$route.name
            }
            if (key) {
              let currentMenuInfo = {}
              let menuContainerClassName = 'el-menu-demo'
              currentMenuInfo.className = menuContainerClassName
              currentMenuInfo.key = key
              setCurrentMenuStyle(currentMenuInfo)
            }
            sessionStorage.setItem('currentClickMenuKey', key)
          }
          break
        }
      }
      this.$nextTick(() => {
        let submenuItemId = tab.name
        let doms = document.getElementsByTagName('ul')
        let uls = []
        for (let i = 0; i < doms.length; i++) {
          if (doms[i].className === 'submenuThumb') {
            uls.push(doms[i])
          }
        }
        for (let k = 0; k < uls.length; k++) {
          for (let i = 0; i < uls[k].childNodes.length; i++) {
            let menuId = uls[k].childNodes[i].getAttribute('data')
            if (menuId === submenuItemId) {
              uls[k].childNodes[i].style.backgroundColor = '#ecf5ff'
              uls[k].childNodes[i].style.color = 'rgb(64, 158, 255)'
            } else {
              uls[k].childNodes[i].style.backgroundColor = '#d9eafc'
              uls[k].childNodes[i].style.color = 'unset'
            }
          }
        }
      })
      this.$router.push({ path: path })
    },
    tabRemove (targetName) {
      // console.log(targetName)
      this.$store.commit('delete_tabs', targetName)
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            'set_active_index',
            this.options[this.options.length - 1].route
          )
          let key = this.$store.state.options[this.options.length - 1].index
          if (key) {
            this.menuList = this.menus[key].children
            let prevKey = sessionStorage.getItem('currentClickMenuKey')
            if (prevKey && key !== prevKey) {
              let keysInfo = {}
              keysInfo.prevKey = prevKey
              keysInfo.currentKey = key
              clearPrevMenuStyle(keysInfo)
              // let routName = this.$route.name
            }
            if (key) {
              let currentMenuInfo = {}
              let menuContainerClassName = 'el-menu-demo'
              currentMenuInfo.className = menuContainerClassName
              currentMenuInfo.key = key
              setCurrentMenuStyle(currentMenuInfo)
            }
            sessionStorage.setItem('currentClickMenuKey', key)
          } else {

          }

          this.$router.push({ path: this.activeIndex })
        } else {
          this.$router.push({ path: '/' })
        }
      }
    },
    handleSelect (key, keyPath) {
      if (key.split('').length <= 1) {
        let prevKey = sessionStorage.getItem('currentClickMenuKey')
        if (prevKey && key !== prevKey) {
          let keysInfo = {}
          keysInfo.prevKey = prevKey
          keysInfo.currentKey = key
          clearPrevMenuStyle(keysInfo)
          // let routName = this.$route.name
        }
        if (key) {
          let currentMenuInfo = {}
          let menuContainerClassName = 'el-menu-demo'
          currentMenuInfo.className = menuContainerClassName
          currentMenuInfo.key = key
          setCurrentMenuStyle(currentMenuInfo)
        }
        this.nav = key
        sessionStorage.setItem('currentClickMenuKey', key)
        if (keyPath.length > 1) return
        if (this.menus && this.menus[key].children) {
          this.menuList = this.menus[key].children
          this.$router.push({ path: this.menus[key].children[0].uri })
          // let leftMenuPrevKey = sessionStorage.getItem('currentClickLeftMenuKey')
          // if (leftMenuPrevKey) return
          // let currentMenuInfo = {}
          // currentMenuInfo.key = 0
          // currentMenuInfo.className = 'left-menu-container'
          // currentMenuInfo.isActiveClassName = 'is-active'
          // setCurrentMenuStyle(currentMenuInfo)
        }
      }
    },
    navigationMenuClickEvt (data) {
      if (data.id === '585757714936836098' && data.uri === '/waterDataAnalysis') {
        this.$router.push({ path: data.uri })
        this.isDataAnalysisView = true
        this.childName = data.name
      } else if (data.id === '589380617884454913' && data.uri === '/eventDataAnalysis') {
        this.$router.push({ path: data.uri })
        this.isDataAnalysisView = true
      } else this.isDataAnalysisView = false
    },
    saveCurrentClickStyle (key) {
      let doms = document.getElementsByTagName('ul')
      if (doms) {
        let uls = []
        for (let i = 0; i < doms.length; i++) {
          if (doms[i].className === 'submenuThumb') {
            uls.push(doms[i])
          }
        }
        if (uls.length > 0) {
          for (let k = 0; k < uls.length; k++) {
            for (let i = 0; i < uls[k].childNodes.length; i++) {
              uls[k].childNodes[i].style.backgroundColor = ''
              uls[k].childNodes[i].style.color = 'unset'
            }
          }
        }
      }
    },
    exit () {
      // 请求退出接口，然后删除token数据
      logout().then(resp => {
        if (resp.code && resp.code === '200') {
          console.log('logout success')
        }
      })
      clearSessionStorage()
      clearLocalStrorage()
      this.$router.push({name: 'login', params: {error: 'lougout'}})
    },
    goHome () {
      this.$router.push({ path: '/' })
    },
    clearLocalCache () {
      clearLocalStrorage()
    },
    updateUserPassword () {
      this.updatePasswordVisible = true
    },
    cancel () {
      this.updatePasswordVisible = false
      this.updateUserInfoVisible = false
    },
    saveNewPwd () {
      if (this.updatePasswordFormData) {
        let _this = this
        updateUserPwd(this.updatePasswordFormData).then(data => {
          if (data && data.code === '200') {
            _this.exit()
          }
        })
      }
    },
    updateUserInfo () {
      this.updateUserInfoVisible = true
      this.getUserInfo()
      this.dictData.gender = DictDataUtil.getGenderByCache()
      this.dictData.title = DictDataUtil.getTitleByCache()
      this.dictData.education = DictDataUtil.getEducationByCache()
      this.dictData.politicsStatus = DictDataUtil.getPoliticsStatusByCache()
      this.updateUserInfoLoading = false
    },
    getUserInfo () {
      getUserDetail().then(resp => {
        if (resp.code && resp.code === '200') {
          setUserInfo(resp.data)
          this.updateUserInfoFormData = resp.data
        }
      })
    },
    saveNewUserInfo () {
      if (this.updateUserInfoFormData) {
        let data = this.updateUserInfoFormData
        updateUserDetail(data).then(resp => {
          if (resp.code && resp.code === '200') {
            this.cancel()
            this.getUserInfo()
            this.$notify({ title: '提示', message: '修改成功', type: 'success' })
          }
        })
      }
    }
  },
  computed: {
    options () {
      return this.$store.state.options
    },
    activeIndex: {
      get () {
        return this.$store.state.activeIndex
      },
      set (val) {
        this.$store.commit('set_active_index', val)
      }
    }
  },
  watch: {
    '$route' (to) {
      let flag = false
      for (let option of this.options) {
        if (option.name === to.name) {
          flag = true
          this.$store.commit('set_active_index', to.path)
          break
        }
      }
      if (!flag) {
        this.$store.commit('add_tabs', {
          route: to.path,
          name: to.name,
          index: this.nav
        })
        this.$store.commit('set_active_index', to.path)
      }
      const toDepth = to.path
      const toName = to.name
      document.title = toName + '_综治网格化管理平台'
      if (toDepth === '/waterDataAnalysis' || toDepth === '/eventDataAnalysis') {
        this.isDataAnalysisView = true
      } else this.isDataAnalysisView = false
    }
  }
}
</script>

<style scoped>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.title {
  width: 20%;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 26px;
  background-color: #409eff;
  display: flex;
  justify-content: space-around;
}
.el-menu-demo {
  width: 80%;
  margin-bottom: -1px;
}
.el-menu.el-menu--horizontal {
  display: flex;
  justify-content: flex-end;
  padding-right: 6px;
}
.el-menu--horizontal > .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  float: unset;
}
.el-menu--horizontal > .el-submenu {
  float: unset;
}
.el-header {
  display: flex;
  padding: 0;
}
.app-menu {
  height: 100%;
  background: #d9eafc;
}
.el-main {
  position: relative;
}
.el-main >>> .elheight .el-main::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.el-main >>> .elheight .el-main::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 3px;
}
.leftMenu {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.leftMain {
  height: 100%;
  padding-top: 56px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.leftMain >>> .elheight {
  height: 100%;
}
.leftMain >>> .appTree {
  padding: 0 10px;
  padding-left: 8px;
  width: 220px!important
}
.leftMain >>> .dzy-custom-search-box > div {
  margin-bottom: 10px;
}
.leftMain >>> .dzy-main-header {
  padding-bottom: 0px;
}
.rootContainer {
  height: -moz-calc(100% - 60px);
  height: -webkit-calc(100% - 60px);
  height: calc(100% - 60px);
}
.otherRootContainer {
  position: relative;
  z-index: 1;
}
.rootContainer > .el-aside {
  background: #d9eafc;
  border-right: 1px solid #f1f1f1;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}
.rootContainer > .el-aside::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.rootContainer > .el-aside::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 3px;
}
.el-tabs--card >>> .el-tabs__header {
  box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
}
.el-menu-demo-other {
  width: 80%;
  margin-bottom: 0px;
}
.otherLeftMain {
  position: relative;
  z-index: 1;
  padding-top: 0px;
}
.otherNav {
  position: fixed;
  width: 100%;
  z-index: 999;
}
.otherNav .title {
  background: rgba(0,0,0,0.3)
}
.otherNav .el-menu {
  background: none;
  border-bottom: none
}
.otherLeftMenu {
  top: 60px!important;
  background: rgba(0,0,0,0.3);
}
.otherLeftMenu >>> .el-tabs__item {
  color: #fff
}
.otherLeftMenu >>> .el-tabs__item.is-active {
  color: #409EFF
}
.otherLeftMenu >>> .el-tabs__header {
  margin-bottom: 0
}
.otherNav .el-menu-item:hover {
  background: rgba(0,0,0,0.8)!important
}
.otherNav .el-menu-item.is-active {
  background: rgba(0,0,0,0.5)!important
}
.otherNav .el-submenu >>> .el-submenu__title:hover {
  background: rgba(0,0,0,0.8)!important
}
.huiZhang{
  width: 60px;
  height: 60px;
  background: url(~@/assets/img/hz.png) no-repeat;
  background-size: 60px 60px;
}
.special-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: #fff;
}
</style>
